<div ng-init="init();" class="kmi-layout-content mobile10-content">
    <div class="kmi-header-row">
        <div class="kmi-side-btn left" ng-click="back();">
            <i class="material-icons">&#xE408;</i>
            <div class="kmi-can-click"></div>
        </div>
        <div class="header-title" ng-bind="'mobile10.title' | translate"></div>
    </div>
    <div class="kmi-layout-main-content">
        <!-- 設備 -->
        <div class="kmi-row-fields" style="padding: 16px 10px 0px 16px;">
            <div class="column-item">
                <label class="label" ng-bind="'mobile10.machine_no' | translate"></label>
                <label class="value" ng-bind="machine.machine_no" ng-if="mode=='single'" style="margin-left: 8px;"></label>
                <input class="value" ng-keypress="input_machine_no($event);" id="input_machine" ng-model="machine.machine_no" style="margin-left: 8px;" ng-if="mode=='batch'"/>
                <div class="tip search" ng-click="loadMachineList();" ng-if="mode=='batch'">
                    <img src="image/icons/search.png"></img> 
                </div>
                <div class="qrcode-btn" ng-click="QRCodeScanner('input_machine');" style="margin-left: 8px;" ng-if="mode=='batch'">
                    <img src="image/icons/QRCode.png"> 
                </div>
            </div>
        </div>
        <!-- 模具編號 -->
        <div class="kmi-row-fields" style="padding: 8px 10px 8px 16px; border-bottom:1px #cecece solid;">
            <div class="column-item">
                <label class="label" ng-bind="'mobile10.mold_no' | translate"></label>
                <input class="value" ng-keypress="input_mold_no($event);" id="input_mold" ng-model="barcode_mold_no" style="margin-left: 8px;"/>
                <div class="qrcode-btn" ng-click="QRCodeScanner('input_mold');" style="margin-left: 8px;">
                    <img src="image/icons/QRCode.png">
                </div>
            </div>
        </div>
        <!-- 是否自動下線  -->
        <div class="kmi-row-fields" style="padding-left: 12px; border-bottom: 1px #cecece solid;" ng-show="tab_mode == 'UL'">
            <button class="mdl-button mdl-js-button kmi-checkbox" ng-click="clickIsAutoUnload()">
                <img ng-show="IsAutoUnload != 'Y'" src="image/icons/check0.png"></img>
                <img ng-show="IsAutoUnload == 'Y'" src="image/icons/check1.png"></img>
                {{'mobile10.IsAutoUnload' | translate}}
            </button>
        </div>
        <!-- 已上模 L / 未上模 UL -->
        <div class="kmi-tab-content" style="border-bottom:1px #cecece solid;">
            <div class="tab" ng-click="tab_mode = 'L'" ng-class="{'is-select':tab_mode == 'L'}">
                <label ng-bind="('mobile10.tab_mode.LoadAccToEquipment' | translate) + '('+getTabSize_load()+')'" ></label>
                <div class="kmi-can-click"></div>
            </div>
            <div class="tab" ng-click="tab_mode='UL'" ng-class="{'is-select':tab_mode == 'UL'}">
                <label ng-bind="('mobile10.tab_mode.UnLoadAccFromEquipment' | translate) + '('+getTabSize_unload()+')'" ></label>
                <div class="kmi-can-click"></div>
            </div>
        </div>
        <!-- 已上模內容 -->
        <div class="kmi-list" ng-show="tab_mode == 'L'">
            <div class="kmi-list__row-content">
                <div class="row-content" ng-repeat="item in LoadAccDetails | filter:{'AccessoryNo': barcode_mold_no} track by $index">
                    <div class="kmi-row-fields">
                        <div class="kmi-row-fields">
                            <i class="material-icons" ng-if="!item.isSelect">&#xE835;</i>
                            <i class="material-icons" ng-if="item.isSelect" >&#xE834;</i>
                        </div>
                        <div class="kmi-can-click" ng-click="item.isSelect = !item.isSelect"></div>
                        <div class="kmi-row-fields" style="flex: 1;">
                            <div class="column-item" style="flex-direction: column;">
                                <div class="column-item left row-title" ng-bind="item.AccessoryNo" style=" margin-bottom: 6px;"></div>
                                <div class="column-item left" ng-bind="item.AccessoryName"></div>
                                <div class="column-item left" ng-bind="item.AccessoryType + ' / ' + item.AccessoryCategory"></div>
                            </div>
                        </div>   
                        <div class="kmi-row-fields" style="flex: 1;">
                            <div class="column-item" style="flex-direction: column; text-align: right;">
                                <div class="column-item right" style="margin-bottom: 34px;" ng-bind="('mobile10.storage_spaces' | translate) + item.LocatorNo"></div>
                                <div class="column-item right row-title" style="font-size: 20px;" ng-bind="item.ResidualLife"></div>
                            </div>  
                        </div>
                    </div>   
                </div>
            </div>
        </div>
        <!-- 未上模內容 -->
        <div class="kmi-list" ng-show="tab_mode == 'UL'">
            <div class="kmi-list__row-content">
                <div class="row-content" ng-repeat="item in unLoadAccDetails | filter:{'AccessoryNo': barcode_mold_no} track by $index">
                    <div class="kmi-row-fields">
                        <div class="kmi-row-fields">
                            <i class="material-icons" ng-if="!item.isSelect">&#xE835;</i>
                            <i class="material-icons" ng-if="item.isSelect" >&#xE834;</i>
                        </div>
                        <div class="kmi-can-click" ng-click="item.isSelect = !item.isSelect"></div>
                        <div class="kmi-row-fields" style="flex: 1;">
                            <div class="column-item" style="flex-direction: column;">
                                <div class="column-item left row-title" ng-bind="item.AccessoryNo" style=" margin-bottom: 6px;"></div>
                                <div class="column-item left" ng-bind="item.AccessoryName"></div>
                                <div class="column-item left" ng-bind="item.AccessoryType + ' / ' + item.AccessoryCategory"></div>
                            </div>
                        </div>   
                        <div class="kmi-row-fields" style="flex: 1;">
                            <div class="column-item" style="flex-direction: column; text-align: right;">
                                <div class="column-item right" style="margin-bottom: 34px;" ng-bind="('mobile10.storage_spaces' | translate) + item.LocatorNo"></div>
                                <div class="column-item right row-title" style="font-size: 20px;" ng-bind="item.ResidualLife"></div>
                            </div>  
                        </div>
                    </div>   
                </div>
            </div>
        </div>
        <!-- 按鈕 -->
        <div class="kmi-mobile__btn-content" style="display: flex;justify-content: space-around;">
            <!-- 上模 -->
            <button class="kmi-button__mobile" ng-click="LoadAccToEquipment();" ng-show="tab_mode == 'UL'">
                <label ng-bind="'mobile10.btn.LoadAccToEquipment' | translate"></label>
                <div class="kmi-can-click"></div>
            </button>
            <!-- 下模 -->
            <button class="kmi-button__mobile" ng-click="UnLoadAccFromEquipment();" ng-show="tab_mode == 'L'">
                <label ng-bind="'mobile10.btn.UnLoadAccFromEquipment' | translate"></label>
                <div class="kmi-can-click"></div>
            </button>
            <!-- 異常下模 -->
            <button class="kmi-button__mobile" ng-click="UnLoadAccException();" ng-show="tab_mode == 'L'">
                <label ng-bind="'mobile10.btn.UnLoadAccException' | translate"></label>
                <div class="kmi-can-click"></div>
            </button>
        </div>
    </div>
</div>
